<!DOCTYPE html>
<html xmlns:th="www.thymeleaf.org">
<head th:replace="index::head"></head>
<body>
<div class="bodymain">

    <div th:replace="index::.layui-header"></div>
    <div th:replace="index::.main-nav"></div>

    <link rel="stylesheet" type="text/css" href="bbs/images/css.css">
    <div class="layui-main">
        <div style="clear:both">
        </div>
        <div style="height:10px"></div>
    </div>
    <div class="layui-main">
        <div class="search_box">
            <form class="layui-form layui-form-pane" action="/tobbs" lay-filter="ff">
                <div class="layui-input-inline">
                    <!-- 表达控件的name ==> 实体类的属性名  name="type" -->
                    <select id="type" name="type" lay-filter="type">
                        <option th:each="type : ${tlist}" th:value="${type.id}" th:text="${type.name}">测绘公示</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width:70%;">
                    <input type="text" id="title" name="title" lay-verify="title" autocomplete="off"
                           placeholder="请输入要查询的关键字" class="layui-input" th:value="${param.title}">
                </div>
                <button class="layui-form-label" style="float:right; cursor:pointer" lay-submit lay-filter="go"><i
                        class="layui-icon layui-icon-search"></i>&nbsp;&nbsp;搜索</button>
            </form>
        </div>
        <div style="height:10px; display:block; clear:both"></div> <!---->
        <div class="ask_main">
            <div class="line_10"></div>
            <div class="layui-row layui-col-space0">
                <div class="layui-col-md12"> <!---->
                    <div class="ask_box">
                        <ul class="menu">
                            <li th:class="${param.type == null ?'on':''}"><a href="/tobbs" title="全部公示">公示公告</a></li>
                            <!-- 错误的写法 th:class="${type.id.toString.equals(param.type+'') ? 'on' : ''}"
                                    param.type 不是 字符串类型(String)
                                    将其转成字符串, 则可以对比
                            -->
                            <li th:each="type,i : ${tlist}" th:class="${type.id.toString.equals(param.type+'') ? 'on' : ''}">
                                <a th:href="'/tobbs?type=' + ${type.id}" th:title="${type.name}" th:text="${type.name}">公示公告</a>
                            </li>
                        </ul>
                        <div class="line_10"></div> <!--ask_con_list-->
                        <ul class="newslist">
                            <li v-if="blist==null"  th:each="bbs : ${blist}">
                                <span class="layui-hide-xs" th:text="${bbs.intime}">2021-07-30 16:42:23</span>
                                <a href="bbs_show.html"
                                   th:text="${bbs.title}"
                                   th:title="${bbs.title}"
                                   target="_blank">金钟·悦江湾1#、3#楼、2#、4#楼项目测绘公示</a>
                            </li>

                            <li v-else  v-for=" bbs of blist">
                                <span class="layui-hide-xs" v-text="bbs.intime">2021-07-30 16:42:23</span>
                                <a href="bbs_show.html"
                                   v-text="bbs.title"
                                   :title="bbs.title"
                                   target="_blank">金钟·悦江湾1#、3#楼、2#、4#楼项目测绘公示</a>
                            </li>

                        </ul> <!--ask_con_list-->
                        <div style="height:10px; clear:both; display:block;"></div>
                        <div class="pages">
                            <div class="page" id="page"></div>
                            <script>
                                layui.laypage.render({
                                    elem: 'page' //注意，这里的 page 是 ID，不用加 # 号
                                    ,count: [[${blist.total}]] //数据总数，从服务端得到  thymeleaf 使用 双中括号, 在js 中输出表达式结果
                                    ,limit: 20
                                    ,limits: [10,20,50,100]
                                    ,jump: function(obj, first){
                                        //首次不执行
                                        if(first != true){
                                            var url = "queryPage?page=" + obj.curr +
                                                // layui.$ 是 layui 内置的 jquery 对象
                                                "&type=" + layui.$("#type").val() +
                                                "&title=" + layui.$("#title").val();
                                            axios.get(url).then(res=>{
                                                v.blist = res.data;
                                            });
                                        }
                                    }
                                });
                                //  使用请求参数 type 给 layui下拉框 , 实现参数回显
                                layui.form.val( "ff" , { type: "[[${param.type}]]" });

                                var v = new Vue({
                                    el : ".newslist",
                                    data : {
                                        // blist 为空, 表示第一次打开页面, 查询是第一页, 有thymeleaf完成
                                        // blist 不为空, layui 实现分页查询
                                        blist : null
                                    }
                                })
                            </script>
                        </div>
                        <div style="height:10px; overflow:hidden"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="line_10"></div>
    </div>
    <!-- 引入页脚-->
    <div th:replace="index::.footer"></div>
</div>
</body>
</html>